<#include "/head.ftl"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            配置管理平台
        </div>
        <ol class="am-breadcrumb">
            <li><a href="/" class="am-icon-home">首页</a></li>
            <li><a href="/config/list">配置文件</a></li>
            <li id="i-title" class="am-active">${title}</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> ${title}
                </div>
            </div>

            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <form action="" class="am-form" id="form-with-tooltip">
                            <div class="am-form-group">
                                <label for="doc-vld-name-2-0">服务器名称:</label>
                                <input type="text" id="doc-vld-name-2-0" minlength="2"
                                       placeholder="请输入服务器名称" required
                                       data-foolish-msg="请输入服务器名称"/>
                            </div>
                            <div class="am-form-group">
                                <label for="doc-vld-pwd-1-0">服务器ip:</label>
                                <input type="password" id="doc-vld-pwd-1-0" placeholder="请输入服务器ip地址" minlength="7"  required data-foolish-msg="请输入服务器ip地址"/>
                            </div>

                            <button class="am-btn am-btn-secondary" type="submit">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<style>
    #vld-tooltip {
        position: absolute;
        z-index: 1000;
        padding: 5px 10px;
        background: #F37B1D;
        min-width: 150px;
        color: #fff;
        transition: all 0.15s;
        box-shadow: 0 0 5px rgba(0,0,0,.15);
        display: none;
    }

    #vld-tooltip:before {
        position: absolute;
        top: -8px;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -8px;
        content: "";
        border-width: 0 8px 8px;
        border-color: transparent transparent #F37B1D;
        border-style: none inset solid;
    }
</style>

<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/app.js"></script>
<script>

    $("#i_li_config a").addClass("active");
    $("#i_li_config a i:last").addClass("tpl-left-nav-more-ico-rotate");
    $("#i_li_config ul").attr("style","display:block");

    $(function() {
        var $form = $('#form-with-tooltip');
        var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
        $tooltip.appendTo(document.body);

        $form.validator();

        var validator = $form.data('amui.validator');

        $form.on('focusin focusout', '.am-form-error input', function(e) {
            if (e.type === 'focusin') {
                var $this = $(this);
                var offset = $this.offset();
                var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

                $tooltip.text(msg).show().css({
                    left: offset.left + 10,
                    top: offset.top + $(this).outerHeight() + 10
                });
            } else {
                $tooltip.hide();
            }
        });
    });
</script>
</body>

</html>